import { h, VNode } from 'vue';
import { ElTableColumn } from 'element-plus';
import { OperateButton } from '@/global';
export interface TableColumnConfig<T>{
  label: string,
  prop?: string;
  dom?: (scope: {row: T}) => VNode,
  fixed?: string,
  width?: string | number,
  subColumn?: TableColumnConfig<T>[],
}

// 创造单行的el-column
export const createPerElTableColumn = (config: TableColumnConfig<any>) => {
  if (!config.subColumn) {
    return <ElTableColumn label={config.label} width={config?.width} fixed={config?.fixed}>{{ default: config.dom ? config.dom : null }}</ElTableColumn>;
  } else {
    return <ElTableColumn label={config.label}>
      {config.subColumn.map(item => createPerElTableColumn(item))}
    </ElTableColumn>;
  }
};
// 创造单行里面的操作列
export const createOperateActions = (config: OperateButton<any>[], scope: {row: any}) => {
  return config.filter(item => item.isShow(scope)).map(item => <div v-waves class='wind-text-button' onClick={() => item.action(scope)}>{item.title}</div>);
};

// 批量创造el-column
export const createElTableColumns = (config: TableColumnConfig<any>[]) => {
  return config.map(item => createPerElTableColumn(item));
};
